window.onload = function () {
    const MYURL='http://192.168.1.158:8000';   // 自己的服务器
    var oImg = document.getElementById("img");
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    oImg.src=MYURL+'/static/images/pic2.png';   //要出现的图片
    let gif = new GIF({
        workers: 4,
        quality: 30,
        workerScript: "./static/js/Gif/gif.worker.js", // '是在index.html' 开始寻找的
        // transparent: "#fff",
        // background: '#ffffff',
    });
    gif.on("finished",function(blob){
        // console.log(URL.createObjectURL(blob));
		// var a = document.createElement('a');
		// a.download = '测试';
		// a.href = URL.createObjectURL(blob);
		// document.body.appendChild(a);
        var file = new FileReader();
        file.readAsDataURL(blob);
        file.onload = function(){
            document.getElementById("result").setAttribute("src", URL.createObjectURL(blob))
        }
    })
     //  帧数需要自己设置
    var imgList = [
        MYURL+'/static/images/GIF/pice1.png',
        MYURL+'/static/images/GIF/pice2.png',
        MYURL+'/static/images/GIF/pice3.png',
    ];
    var imgObjList = [],count = 0;

    for (let i=0; i<imgList.length; i++){
        var tmpImg = new Image();
        imgObjList.push(tmpImg);
        tmpImg.src = imgList[i];
        tmpImg.onload = function () {
            count++;
            if (count === imgList.length ){
                generateGif(imgObjList);
            }
        }
    }
    function generateGif(imgObjList) {
        for (let i=0;i<imgObjList.length;i++){
            ctx.save();
            // 参数 1、2是距离左上距离   4、5是宽高
            ctx.drawImage(oImg,160,80,500,500);
            ctx.drawImage(imgObjList[i],0,0,canvas.width,canvas.height);
            ctx.restore();
            gif.addFrame(canvas,{copy:true,delay:1000})
            ctx.clearRect(0,0,canvas.width,canvas.height)
        }
        gif.render();
    }
}

function down(src){
            //src是图片路径
            var eleLink = document.createElement('a');
            eleLink.download = '孙刘森.gif';
            eleLink.style.display = 'none';
            //字符内容转变成blob地址
            eleLink.href = src;
            //触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            //然后移除
            document.body.removeChild(eleLink);
 }
function GetSrc(){   // 点击出现文件src
  let imgSrc=document.getElementById('result');
  let pText=document.getElementById('p');
  down(imgSrc.src)
  pText.innerHTML=imgSrc.src;
}